<template>
	<view class="tiezi">
		<view class="header">
			<view class=""
				style="height: 300rpx;background-image: url('https://ctrlsoft.net.cn/app_static/hesaid//img/wshing/Slice.png');display: flex;align-items: center;background-repeat: no-repeat">
				<view class="">
					<uni-icons custom-prefix="back" type="back" size="30" color="white" @tap='Black'></uni-icons>
				</view>
			</view>
			<view class="boder_card">
				<view class="boder_card_pd">
					<view class="boder_btn_box">
						<image :src="imgs" mode="aspectFill" class="pd_img"></image>
						
						<view class="right_btn" v-if="isid">
							<!-- {{userid}} -->
							
							<view class="guanzhu">
								<!-- 关注 -->
							</view>
							<view class="sixin" @click="Privatemessage">
								私信
							</view>
						</view>
					</view>
					<!-- 					<image :src="imgs" mode="" class="pd_img"></image> -->
					<view class="pd_name">
						{{userInfo.realname == "null" ? 0 : userInfo.realname}}
					</view>
					<view class="pd_redu">
						<image :src="reduimg" mode="aspectFill"
							style="width: 40rpx;height: 32rpx;opacity: 1;vertical-align: bottom;"></image>热度：{{ hotCount }}
					</view>
					<view class="pd_footer">
						<view class=""> <text class="txt1">{{likes}}</text> <text class="txt2">获赞</text> </view>
					<!-- 	<view class=""> <text class="txt1">12</text> <text class="txt2">关注</text></view>
						<view class=""><text class="txt1">89</text> <text class="txt2">粉丝</text></view> -->
					</view>
				</view>
			</view>
		</view>
		<view v-if="show">
			<no-more></no-more>
		</view>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="error" cancelText="关闭" confirmText="同意" title="通知" content="确定删除吗?"
				@confirm="dialogConfirm"></uni-popup-dialog>
		</uni-popup>

		<scroll-view scroll-y="true" @scrolltolower="loadMore" :enable-back-to-top="true" :lower-threshold="30"
			:scroll-top="scrollTop" style="height: 60vh;">
			<view class="card_one">
				<view class="card_main" v-for="(item,index) in arr">
					<view class="first">
						<view class="left_img" @click="mypostDetail(item.id)">
							<image mode="aspectFill" :src="item.headPortrait == null ? 'https://img95.699pic.com/xsj/10/tm/0h.jpg%21/fh/300' : item.headPortrait" style="width:80rpx ;height: 80rpx;border-radius: 50%;"></image>
						</view>
						<view class="right_font">
							<view class="guapi">
								{{item.nickname == null ? 0 : item.nickname}}
							</view>
							<view class="redu">
								<text style="font-size: 24rpx;color: #ADADAD;">{{item.createTime}}</text>
								<image :src="reduimg" mode="aspectFill"
									style="width: 35rpx;height: 32rpx;opacity: 1;vertical-align: bottom;margin-left: 10rpx;"></image>
								<text style="font-size: 24rpx;color: #ADADAD;margin-left: 5rpx;">热度</text> : <text style="margin-left: 5rpx;"> {{item.pageView}}</text>
								<text v-if="item.userId == userid" class="delBtn" @click="delInfo(item.id,index)">删除</text>
							</view>
						</view>
					</view>
					<view @click="mypostDetail(item.id)">
						<view class="second">
							<!-- {{item.postContent.length > 100 ? item.postContent.slice(0,100) + '......' : item.postContent}} -->
							  <rich-text class="forumContent" :nodes=" item.postContent.replace(/\n/g, '<br/>')"></rich-text>
						</view>
						<view class="imgInfo" >
                            <image mode="aspectFill" v-for="(child,index) in item.postPicture" :key="index" :src="child.pricturePath" />
                        </view>
					
					</view>
					<view class="footer" >
						<view class="" style="width: 200rpx;padding-left: 50rpx;">
							<uni-icons custom-prefix="eye" type="eye" size="24"
								style="vertical-align: middle;"></uni-icons>
							<text class="count">{{item.pageView}}</text>
						</view>
						<view class="" style="width: 197rpx;">
							<uni-icons custom-prefix="chat" type="chat" size="24"
								style="vertical-align: middle;"></uni-icons><text
								class="count">{{item.numberOfComments}}</text>
						</view>
						<view class="" style="width: 140rpx;">
							<uni-icons custom-prefix="hand-up" type="hand-up"
								:color="item.like == 1 ? 'red' : '#333333'" size="24" style="vertical-align: middle;"
								@click="Icons(item.id,item.numberLikes,item.like,index)"></uni-icons><text
								class="count">{{item.numberLikes}}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 	<view class="btn">
			<button class="ft_btn">开启语音文字咨询</button>
		</view> -->
		
	</view>
</template>

<script>
	import {
		postList,
		Informationdel
	} from '@/utils/OnetoOneaApi.js'
	import {
		addLikeAPI,
		chatListadd,
		getUserPostLikeCount,
		getUserPostReadCount
	} from '@/utils/api.js'
	import {
		baseURL,
		imgBaseUrl
	} from '@/utils/baseUrl.js'
	let userInfos = uni.getStorageSync('userInfo')
	import noMore from '../../../../components/no-data/no-more.vue'
	export default {
		components:{noMore},
		data() {
			return {
				show: false,
				imgs: '',
				hotCount:'',
				likes:'',
				invitationId:'',// 帖子id
				id:'', // 帖子下标
				reduimg: imgBaseUrl + '/img/allImgs/forum/hot.svg',
				arr: [],
				pageNo: 1,
				pageSize: 10,
				id: '',
				userInfo: {},
				ids: '',
				isid:false,
				userid:userInfos.id,
				
			}
		},
		onHide(){
			this.show = false
		},
		mounted() {
			this.id = this.$parent.id
			this.userInfo = this.$parent.userInfo
			// this.Datalist();
			this.ids = this.$parent.idx
			let img1 = this.$parent.userInfo.avatar
			let img2 = this.$parent.img
			console.log("ids",this.ids )
			console.log(img2,img1,'img2');
			console.log('this.$parent',this.$parent)
			//判断是否为用户本身id，如果是就不展示私信和关注
			if(this.ids != ""){
				this.isid = true
				this.imgs = img2 != 'null' ? img2 : 'https://img95.699pic.com/xsj/10/tm/0h.jpg%21/fh/300'
				console.log("我是自己的人")
				
			}else{
				console.log("我执行了么？",img1,img1 == 'null')
				this.imgs = img1 == 'null' || img1 == null ?  'https://img95.699pic.com/xsj/10/tm/0h.jpg%21/fh/300': img1
				
			}
			// if(this.userid == this.ids){
			// 	this.isid = true
			// }
			// if(this.userid != this.ids && this.ids)
			// {
			// 	this.isid = true
			// 	this.imgs = img2 
			// }else
			// {
			// 	if(img2)
			// 	{
			// 		this.imgs = img2 == 'null' || null ? 'https://img95.699pic.com/xsj/10/tm/0h.jpg%21/fh/300'  : img2
			// 	}else
			// 	{
			// 		this.imgs = img1 == null ? 'https://img95.699pic.com/xsj/10/tm/0h.jpg%21/fh/300' : img1 ? img1 :img2
			// 	}
			    
			// }
			// this.getLike()
			// this.getHotCount();
		},
		methods: {
			async getHotCount(){
				let userInfos = uni.getStorageSync('userInfo')
				const res = await getUserPostReadCount(userInfos.id)
				this.hotCount = res.result
			},
			// 获取点赞量
			async getLike(){
				let userInfos = uni.getStorageSync('userInfo')
				const res = await getUserPostLikeCount(userInfos.id );
				this.likes = res.result;
			},
			async Datalist(id) {
				const status = 0
				const res = await postList(id, status, this.pageNo)
				if(res.result.records.length == 0 && this.pageNo == 1){
					this.show = true
				}
				const data = res.result.records
				this.arr = data
			},
			// 图片渲染
			getImgUrl(image) {
				return baseURL + '/' + image;
			},
			async delInfo(id,index){
				this.invitationId = id;
				this.idx = index;
				this.$refs.alertDialog.open()
				
			},
			async dialogConfirm(){
				const res = await Informationdel(this.invitationId);
				if(res.code == 200){
					this.arr.splice(this.idx,1)
					this.arr = this.arr;
				}

			},
			//点赞
			async Icons(id, numberLikes, like, index) {
				let params = {}
				let obj = {}
				if (like == 1) {
					params = {
						id,
						like: 0,
						numberLikes: numberLikes - 1
					}
					this.arr[index].like = 0;
					this.arr[index].numberLikes = numberLikes - 1;
					obj = this.arr[index]
				} else {
					params = {
						id,
						like: 1,
						numberLikes: numberLikes + 1
					}
					this.arr[index].like = 1;
					this.arr[index].numberLikes = numberLikes + 1;
					obj = this.arr[index]
				}
				await addLikeAPI(params);
				this.$set(this.arr, index, obj)
				this.getLike();
			},
			//触底加载
			async loadMore() {
				const status = 0
				this.pageNo++
				console.log(this.id,'this.id');
				const res = await postList(this.id, status, this.pageNo)
				console.log(res,'res')
				this.arr = [...this.arr, ...res.result.records]
			},
			Black() {
				uni.navigateBack(-1)
			},
			//跳转帖子详情
			mypostDetail(id) {
				uni.navigateTo({
					url: `../../../subPackagesA/pages/forumDetails/forumDetails?id=${id}`
				})
			},
			//私信
			async Privatemessage() {
				const userInfo = uni.getStorageSync('userInfo')
				const params = {
					userId: userInfo.id,
					friendUserId: this.ids,
					notes: this.userInfo.realname
				}
					const result = await chatListadd(params)
					if(result.code == 200)
					{
						uni.navigateTo({
							url:`../../../subPackagesA/pages/chat/chat?toUserId=${this.ids}&toAvatar=${this.$parent.img}&notes=${this.userInfo.realname}`
						})
					}
				
				
			}
		}
	}
</script>

<style scoped lang="less">
.delBtn{
	margin-left: 30rpx;

}
.forumContent{
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    word-break: break-all;
    color: #838383;
    line-height: 40rpx;
    font-size: 14px;
    margin-top: 10rpx;
}
	.tiezi {
		width: 100%;
		// height: 100vh;
		background: #F5F5F7;


		.header {
			height: 613rpx;

			.boder_card {
				height: 370rpx;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 0rpx 0rpx;
				position: relative;
				top: -56rpx;

				.boder_card_pd {
					padding: 0 25rpx 0 25rpx;

					.boder_btn_box {
						display: flex;
						justify-content: space-between;

						.pd_img {
							width: 160rpx;
							height: 160rpx;
							border-radius: 50%;
							border: 3px solid white;
							margin-top: -33rpx;
						}

						.right_btn {
							display: flex;
							width: 324rpx;
							justify-content: space-between;
							padding-top: 30rpx;

							.sixin {
								width: 145rpx;
								height: 65rpx;
								border: 1px solid #FF7F22;
								border-radius: 4rpx 4rpx 4rpx 4rpx;
								opacity: 1;
								text-align: center;
								font-size: 30rpx;
								font-family: PingFang SC-Medium, PingFang SC;
								font-weight: 500;
								color: #FF7F22;
								line-height: 64rpx;
							}

							.guanzhu {
								width: 146rpx;
								height: 64rpx;
								// background: #FF7F22;
								// border-radius: 4rpx 4rpx 4rpx 4rpx;
								// opacity: 1;
								// text-align: center;
								// font-size: 30rpx;
								// font-family: PingFang SC-Medium, PingFang SC;
								// font-weight: 500;
								// color: #FFFFFF;
								// line-height: 64rpx;
							}
						}
					}


					.pd_name {
						font-size: 40rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #222229;
						padding: 20rpx 0 20rpx 0;
					}

					.pd_redu {
						font-size: 26rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
						padding-bottom: 20rpx;
						display: flex;
						vertical-align: middle;
					}

					.pd_footer {
						width: 400rpx;
						display: flex;
						justify-content: space-between;

						.txt1 {
							font-size: 36rpx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
							color: #666666;
						}

						.txt2 {
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
						}
					}
				}
			}
		}



		.card_one {
			width: 100%;
			height: 755rpx;
			border-radius: 0px 0px 0px 0px;
			opacity: 1;
			background: #F5F5F7;

			.card_main {
				padding: 30rpx;
				background: #FFFFFF;
				margin-top: 20rpx;

				.first {
					display: flex;

					.right_font {
						margin-left: 20rpx;
						line-height: 38rpx;

						.guapi {
							font-size: 30rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #222229;
						}

						.redu {
							font-size: 26rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
						}
					}
				}

				.second {
					font-size: 32rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #222229;
					line-height: 50rpx;
					padding: 20rpx 0 10rpx 0;
				}

				.three {
					padding: 0rpx 0 20rpx 0;
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;

					.imgone {
						width: 218rpx;
						height: 218rpx;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						opacity: 1;
						margin-top: 10rpx;
					}
				}

				.footer {
					display: flex;
					justify-content: space-between;

					.count {
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #4A4A4A;
					}
				}
			}
		}

		.btn {
			background-color: #FFFFFF;

			.ft_btn {
				width: 343px;
				height: 44px;
				color: #FFFFFF;
				background: #FF7F22;
				border-radius: 4px 4px 4px 4px;
				opacity: 1;
				font-family: PingFang SC-Bold, PingFang SC;
				font-size: 16px;
			}
		}

	}
	.imgInfo{
		image{
			margin-top: 20rpx;
			width: 216rpx;
			height: 216rpx;
			margin-right: 20rpx;
			border-radius: 8rpx;
			&:nth-child(3n+3) {
				margin-right: 0 !important;
			}
		}
	}
</style>